<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="box">
			<com1>
				<!-- template 只是一个包裹元素，没有任何含义 -->
				<!-- 将两个p元素都展示到 slot 名为 header 的位置 -->
				<template slot="header">
					<p>头部</p>
					<p>导航栏</p>
				</template>
				<!-- 这个没有指定 slot 属性,会展示到默认插槽的位置 -->
				<p>中间区域</p>
				<!-- 这个p元素会展示到 slot 名为 footer 的位置 -->
				<p slot="footer">页脚</p>
			</com1>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 具名插槽：具有名字的插槽，就是给 slot 标签添加一个 name 属性
			// 将组件标签中包裹的内容展示到指定的 slot 位置

			Vue.component('com1', {
				template: `
          <div>
            <header>
              <slot name="header"></slot> 
            </header>
            <hr>
            <main>
              <slot></slot>
            </main>
            <hr>
            <footer>
              <slot name="footer"></slot>
            </footer>
          </div>
        `
			})

			var vm = new Vue({
				el: '.box',
				data: {}
			})
		</script>
	</body>
</html>
